.slider {
  white-space: nowrap;

  @include hide-scrollbar;
}

.scroll-wrapper {
}

.slider--single-slide {
  display: flex;
  justify-content: center;
}

:global {
  $hero-scroll-indicator-height: 4px;

  .scroll-indicator-wrapper {
    position: relative;

    &--hero {
      margin: 0 $margin;
      height: $hero-scroll-indicator-height;
      width: calc(100% - 2 * $margin);
    }

    &--default {
      margin: 30px 0 30px $margin;
      width: calc(100% - $margin);
      height: 1px;
      background-color: rgba($colorGrey, 0.3);
    }
  }

  .slider-progress {
    position: absolute;
    transition: transform 0.3s linear;

    &--default {
      height: 1px;
      background-color: $colorVulcan;
    }

    &--hero {
      height: $hero-scroll-indicator-height;
    }
  }
}
